<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/7/21
  Time: 13:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>增加商品</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品名称:</label>
                    <div class="col-sm-4">
                        <input type="text" id="productName" class="form-control"  placeholder="请输入商品名称">
                    </div>
                </div>

                <div class="form-group"  style="height: 400px">
                    <label class="col-sm-2 control-label">商品主图:</label>
                    <div class="col-sm-4" style="height: 300px;">
                        <input type="file" id="mainImage" name="imgFile">
                        <input type="hidden" id="mainImagePath">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">商品价格:</label>
                    <div class="col-sm-4">
                        <input type="text" id="price" class="form-control"  placeholder="请输入商品价格">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">商品库存:</label>
                    <div class="col-sm-4">
                        <input type="text" id="stock" class="form-control" >
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">生产日期:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control"  id="createDate">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">品牌:</label>
                    <div class="col-sm-2"  id="brandSelect">

                    </div>
                </div>

                <div class="form-group" id="cateDiv">
                    <label class="col-sm-2 control-label" id="cateId">分类:</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">商品子图:</label>
                    <div class="col-sm-8">
                        <input type="file" id="image" name="imgFiles" multiple>
                        <input type="hidden" id="imagePath">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" onclick="addProduct();"><span class="glyphicon glyphicon-plus"></span>增加</button>
                        <button type="reset" class="btn btn-default"><i class="glyphicon glyphicon-refresh"></i>重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    $(function (){
        initDate();
        initImage();
        initImages();
        brandSelect();
        cateSelect(0);
    })


    //增加方法
    function addProduct(){
        var v_param = {};
        v_param["product.productName"] = $("#productName").val();
        v_param["product.price"] = $("#price").val();
        v_param["product.stock"] = $("#stock").val();
        v_param["product.createDate"] = $("#createDate").val();
        v_param["product.mainImage"] = $("#mainImagePath").val();
        v_param["product.brandId"] = $("select[name='brandSelectName']").val();
        v_param["product.cate1"] = $($("select[name='cateSelectName']")[0]).val();
        v_param["product.cate2"] = $($("select[name='cateSelectName']")[1]).val();
        v_param["product.cate3"] = $($("select[name='cateSelectName']")[2]).val();
        v_param["product.cateName"] = $($("select[name='cateSelectName']")[0]).find("option:selected").data("cate-name")+"-"
                                    + $($("select[name='cateSelectName']")[1]).find("option:selected").data("cate-name")+"-"
                                    + $($("select[name='cateSelectName']")[2]).find("option:selected").data("cate-name");
        v_param.imagePath = $("#imagePath").val().substring(1);
        $.ajax({
            type:"post",
            url:"/product/add.do",
            data:v_param,
            success:function (res){
                if (res.code == 200){
                    location.href = "/product/toList.do"
                }
            }
        })
    }

    //分类下拉框
    function cateSelect(id,obj){
        //js中这样是直接判断是否有值
        if (obj){
            //$(js对象),此方法将js对象转换为jquery对象
            //parent:获取元素的上一级
            //nextAll:获取同级元素
            //remove:删除
            $(obj).parent().nextAll().remove()
        }

        $.post({
            type:"post",
            url: "/cate/findCateByFatherId.do",
            data: {"id":id},
            success:function(result){
                if (result.code == 200){
                    var v_cate = result.data;
                    if (v_cate.length > 0){
                        var v_html =  '<div class="col-sm-2" >' +//this.value是当前对象的id，this代表自身
                            '<select name="cateSelectName" class="form-control" onchange="cateSelect(this.value,this)">' +
                            '<option value="-1">请选择</option>';

                        for (var i = 0; i < v_cate.length; i++) {
                            v_html += '<option value="'+v_cate[i].id+'" data-cate-name="'+v_cate[i].cateName+'">'+v_cate[i].cateName+'</option>'
                        }
                        v_html += '</select></div>';
                        $("#cateDiv").append(v_html);
                    }
                }
            }
        })
    }

    //品牌下拉框
    function brandSelect(){
        $.ajax({
            type:"post",
            url:"/brand/findBrandList.do",
            success:function (res){
                if (res.code == 200){
                    var v_brandList = res.data;
                    var v_html = '<select name="brandSelectName" class="form-control">' +
                        '<option value="-1">请选择</option>';
                    for (let v_brand of v_brandList){
                        v_html += '<option value="'+v_brand.id+'">'+v_brand.brandName+'</option>'
                    }
                    v_html += '</select>';
                    $("#brandSelect").html(v_html);
                }
            }
        })
    }


    // 初始化日期组件
    function initDate() {
        $('#createDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
    }

    // 渲染文件上传组件
    function initImage() {
        // 配置信息
        var setting = {
            language: 'zh',
            uploadUrl: "/file/uploadImage.do", // 后台上传文件的url地址
            showUpload : false,
            showRemove : false
        };
        // 渲染组件
        // 回调函数，fileuploaded
        $("#mainImage").fileinput(setting).on("fileuploaded", function (event, r, previewId, index) {
            // 服务端响应给客户端的数据{code:,msg:,data:}
            var v_result = r.response;
            if (v_result.code == 200) {
                $("#mainImagePath").val(v_result.data);
            }
        });
    }

    // 渲染文件多上传组件
    function initImages() {
        // 配置信息
        var setting = {
            language: 'zh',
            uploadUrl: "/file/uploadImages.do", // 后台上传文件的url地址
            uploadAsync: false,//关闭异步上传
            dropZoneEnabled: false,//是否显示拖拽区域
            showUpload : true,
            showRemove : false
        };
        // 渲染组件
        // 回调函数，fileuploaded
        $("#image").fileinput(setting).on("filebatchuploadsuccess", function (event, r, previewId, index) {
            // 服务端响应给客户端的数据{code:,msg:,data:}
            var v_result = r.response;
            console.log(r)
            if (v_result.code == 200) {
                $("#imagePath").val(v_result.data);
            }
        });
    }
</script>
</body>
</html>
